<template>
    <h3 class="text-base font-bold mt-[15px] component-title">
        <img class="w-[24px] h-[24px]" :src="Icon" />
        <div>{{ title }}</div>
        <div class="titleIntro">{{ tip }}</div>
    </h3>
    <el-slider class="slider" v-model="value" />
</template>

<script setup lang="ts">
import { useAppStore } from '~/stores/app'
import Icon from '@/assets/images/drawing/icon_prompt.png'
import { Delete, Switch, CopyDocument } from '@element-plus/icons-vue'
import { useVModels } from '@vueuse/core';
const appStore = useAppStore()
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any,
        placeholder?: string,
        title?: string,
        tip?: string,
    }>(),
    {
        modelValue: '',
        placeholder: '',
        title: '',
        tip: '',
    }
)
const { modelValue: value, title } = useVModels(props, emit)
</script>

<style lang="scss" scoped>
.component-title {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    height: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;

    .titleIntro {
        margin-left: 8px;
        height: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 10px;
        color: #616772;
        line-height: 12px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.length-suffix {
    position: absolute;
    bottom: 0;
    left: 0px;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    background:var(--el-bg-color-base);

}

.slider {
    width: 100%;
    display: flex;
    align-items: center;
}

.slider .el-slider {
    margin-top: 0;
    margin-left: 12px;
}
</style>
